﻿<html>
<head>
	<link href='popup.css' rel='stylesheet' type='text/css'/>
	<script src='md5.js' type='text/javascript'></script>
	<script src='popup.js' type='text/javascript'></script>
	<script type='text/javascript'>
	
		document.addEventListener('DOMContentLoaded', function(e) {
			document.getElementById('insert-button').addEventListener('click', function(e) {
				alert(document.activeElement);
			}, false);
		});

		flickr.getSetList(function(r) {
			if (r.status.success) {
				var list = document.getElementById('set-list');
				
				for (var i = 0; i < r.json.length; i++) {
					var option = document.createElement('option');
					option.text = r.json[i].title + ' [' + r.json[i].total + ']';
					option.value = r.json[i].id;
					list.add(option, null);
				}
				document.getElementById('choose-set').style.display = 'inline';
				
			} else {
				console.log(r.status.message);
				showError(r);
			}
		});
		
		// http://code.google.com/chrome/extensions/tabs.html#type-Tab
		function test() {
			chrome.tabs.getSelected(function(tab) {
			
			});
		}
		
		function showError(r) {
			var a = document.createElement('a');
			a.setAttribute('href', r.url);
			a.innerHTML = r.status.message;
			a.addEventListener('click', function(e) {
				e.preventDefault();
				chrome.tabs.create({'url': this.getAttribute('href')});
				return false;
			}, false);
			
			showMessage(a);
		}
		
		function showMessage(m) {
			var div = document.getElementById('message');
			if (typeof(m) == 'string') {
				div.innerHTML = m;
			} else {
				div.innerHTML = '';
				div.appendChild(m);
			}
			div.style.display = 'block';
		}
		
		function hideMessage() {
			var div = document.getElementById('message');
			div.innerHTML = '';
			div.style.display = 'none';
		}

		function showPhotos() {
		  var photos = req.responseXML.getElementsByTagName("photo");

		  for (var i = 0, photo; photo = photos[i]; i++) {
			var img = document.createElement("image");
			img.src = constructImageURL(photo);
			document.body.appendChild(img);
		  }
		}

		// See: http://www.flickr.com/services/api/misc.urls.html
		function constructImageURL(photo) {
		  return "http://farm" + photo.getAttribute("farm") +
			  ".static.flickr.com/" + photo.getAttribute("server") +
			  "/" + photo.getAttribute("id") +
			  "_" + photo.getAttribute("secret") +
			  "_s.jpg";
		}
	</script>
</head>
<body>
	<div id='message'></div>
	<div id='login'>

	</div>

	<div id='choose-set'>
		<select id='collection-list'><option>All</option></select>
		<select id='set-list'></select>
		<select id='photo-size'>
			<option>Small</option>
			<option>Medium 500</option>
			<option>Medium 640</option>
			<option value='b'>Large</option>
			<option value='o'>Original</option>
		</select>
		<input id='insert-button' type='button' value='Insert'/>
	</div>

	<div id='choose-photo'>
		
	</div>
	
	<div id='verify-links'>
	
	</div>
</body>
</html>